<template>
	<view class="carousel">
		<swiper :circular="true" indicator-dots :autoplay="config.autoplay === false ? config.autoplay : true"
			:interval="config.interval || 3000">
			<swiper-item v-for="(item, index) of swiperList" :key="index">
				<navigator :url="item.url" hover-class="none" class="navigator">
					<image mode="aspectFill" class="image" :src="item.src"></image>
				</navigator>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	const props = defineProps({
		config: {
			type: Object,
			default: () => ({})
		},
		swiperList: {
			type: Array,
			default: () => []
		}
	})
</script>

<style scoped lang="scss">
	.carousel {
		height: 280rpx;

		.navigator,
		.image {
			width: 100%;
			height: 100%;
		}
	}
</style>